import React, { Children, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom'
import "./xmain.css"
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UsergroupAddOutlined,
    UnorderedListOutlined,
    CaretRightOutlined,
    HighlightOutlined,
    SnippetsOutlined,
    PicLeftOutlined,
} from '@ant-design/icons';
import { Layout, Menu, theme, Button, Dropdown, Space, message } from 'antd';
import logo from '../assets/logoImg.png'
const { Header, Content, Footer, Sider } = Layout;
/* 获取菜单 */
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
/* items是左侧菜单项 */
const items = [
    getItem("主页", "/admin/mainboard", <UsergroupAddOutlined />),
    getItem("基础信息", "/admin/info", <UnorderedListOutlined />,
        [
            getItem("学生信息", "/admin/studentInfo"),
            getItem("教师信息", "/admin/teacherInfo")
        ]
    ),
    getItem("成绩分析", "/admin/afterTest", <SnippetsOutlined />,
        [
            getItem("考前信息打印", "/admin/infoPrintBeforeTest"),
            getItem("考试成绩打印", "/admin/resultPrintAfterTest"),
            getItem("考试成绩", "/admin/testScore")
        ]),
    getItem("其他", "/admin/other", <PicLeftOutlined />,
        [
            getItem("综评重命名", "/admin/zpRename")
        ])
];
/* dropDownItems右上角头像下的菜单 */
const dropDownItems = [
    {
        key: 'personInfo',
        label: (<a>个人中心</a>),
    },
    {
        key: 'layout',
        label: (<a>退出</a>),
    },
];

const AdminMain = ({ children }) => {
    const [collapsed, setCollapsed] = useState(false);
    const [mr, setMr] = useState(200);//layout左缩进的宽度
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const navigate = useNavigate();
    // 点击个人中心下面菜单的处理函数
    const personClick = ({ key }) => {
        if (key === "personInfo") {
            message.info("尚未开放，请耐心等待！")
        } else if (key === "layout") {
            navigate("/")
        }
    }
    /* 返回菜单中当前选中和展开的项 */
    function getNowMenu(key, menus) {
        let checkedMenus = []
        menus.forEach((item) => {
            if (item.key === key) {
                checkedMenus.push(item.key);
            } else if (item.children !== undefined) {
                item.children.forEach((i) => {
                    if (i.key === key) {
                        checkedMenus.push(i.key);
                        checkedMenus.push(item.key);
                    }
                })

            }
        })
        return checkedMenus;
    }
    const { pathname } = useLocation()
    let checkedMenus = getNowMenu(pathname, items)
    return (
        <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed}
                style={{
                    overflow: 'auto',
                    height: '100vh',
                    position: 'fixed',
                    left: 0,
                    top: 0,
                    bottom: 0,
                }}
            >
                <div className="demo-logo-vertical">
                    <img src={logo}></img>
                </div>
                <Menu theme="dark" 
                    defaultOpenKeys={checkedMenus} 
                    selectedKeys={checkedMenus} defaultSelectedKeys={checkedMenus} mode="inline" items={items}
                    onClick={({ key }) => {
                        navigate(key);
                    }}
                />
            </Sider>
            <Layout
                style={{
                    marginLeft: mr
                }}
            >
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                >
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => { setCollapsed(!collapsed); mr === 80 ? setMr(200) : setMr(80) }}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                    <span className='titleDiv'>教辅空间<span style={{ fontSize: '15px' }}>V2025.11.13</span></span>
                    <Dropdown
                        menu={{
                            items: dropDownItems,
                            onClick: personClick,
                        }}
                    >
                        <img src={logo} style={{ width: '25px', borderRadius: '100%', float: "right", margin: '20px 30px 0 0' }} />
                    </Dropdown>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px 0',
                        overflow: 'initial',
                    }}
                >
                    <div
                        style={{
                            padding: 24,
                            textAlign: 'center',
                            minHeight: '84vh',
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        {children}

                    </div>
                </Content>
                <Footer
                    style={{
                        textAlign: 'center',
                    }}
                >
                    信息技术组 ©{new Date().getFullYear()}
                </Footer>
            </Layout>
        </Layout >
    );
};
export default AdminMain;